<template>
    <div class="stencil-container-warpper">
        <div class="stencil-title">表清单</div>
        <div class="stencil-container" :style="{ visibility: collapsed ? 'hidden' : '' }" ref="stencilContainerRef">
        </div>
    </div>
</template>
<script>
import { defineComponent, ref, defineProps, toRefs } from 'vue';
import { Stencil } from '@antv/x6-plugin-stencil'

const props = defineProps({
    collapsed: Boolean,
});

export default defineComponent({
    name: "ErTableStencilList",
    setup() {
        const stencilContainerRef = ref(null);
        const { collapsed } = toRefs(props);
        let graph = null;
        let stencil = null;
        const searchShape = (cell, keyword) => {
            console.log("searchShape", cell.data, keyword);
            return cell?.data?.tableInfo?.tableName?.indexOf(keyword) !== -1
                || cell?.data?.tableInfo?.tableComment?.indexOf(keyword) !== -1
        }
        const createSketchNode = (nodeData) => {
            return graph.createNode({
                shape: 'er-table-sketch',
                width: 300,
                height: 50,
                attrs: {
                    body: {
                        fill: '#fff',
                        stroke: '#8f8f8f',
                        strokeWidth: 1,
                    }
                },
                data: nodeData
            })
        }
        const createErTableNode = (nodeData) => {
            let newNode = graph.createNode({
                shape: 'er-table',
                width: 400,
                height: 100,
                data: nodeData,
            });
            return newNode;
        }
        const setStencilData = (dataList) => {
            let nodeList = [];
            for (let nodeData of dataList) {
                nodeList.push(createSketchNode(nodeData));
            }
            stencil.load(nodeList);
        }
        const getStencilDataOfTest = () => {
            let dataList = [];
            for (let i = 0; i < 30; i++) {
                dataList.push({
                    tableInfo: {
                        id:'table'+i,
                        tableName: 'wind_klsz_ea_wind_klsz_ea_wind_klsz_ea_wind_klsz_ea_' + i,
                        tableComment: 'ECA表_' + i,
                        columnList:[{
                            columnCode:'id',
                            columnName:'代理主键',
                            dataType:'nvarchar'
                        },{
                            columnCode:'code',
                            columnName:'代号',
                            dataType:'nvarchar'
                        }]
                    }
                })
            }
            console.log("getStencilDataOfTest", dataList);
            return dataList;
        }
        const initStencil = (targetGraph) => {
            graph = targetGraph;
            stencil = new Stencil({
                title: '组件',
                target: graph,
                search: searchShape,
                placeholder: '输入名称查找',
                notFoundText: '未找到',
                collapsable: true,
                stencilGraphWidth: 300,
                stencilGraphHeight: 0,
                stencilGraphPadding: 0,
                layoutOptions: {
                    resizeToFit: false,
                    columns: 1,
                    dx: 0,
                    dy: 0,
                    center: false,
                    rowHeight: 60,
                },
                getDropNode: (node) => {
                    return createErTableNode(node.getData());
                }
            })
            stencilContainerRef.value.appendChild(stencil.container);
            setStencilData(getStencilDataOfTest());
        }
        return {
            stencilContainerRef,
            collapsed,
            initStencil,
            setStencilData
        }
    }
});
</script>
<style>
.x6-widget-stencil-content::-webkit-scrollbar {
    display: none
}

.x6-widget-stencil-content:hover::-webkit-scrollbar {
    display: inline
}

.x6-widget-stencil-content::-webkit-scrollbar {
    width: 4px;
}

.x6-widget-stencil-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(203, 247, 247);
}

.x6-widget-stencil-content::-webkit-scrollbar-track {
    border-radius: 0;
    background: #b8d5f3;
}

.ant-layout-sider-collapsed .stencil-container-warpper .stencil-container{
    display: none;
}
.ant-layout-sider-collapsed .stencil-container-warpper .stencil-title{
    word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
    /*自测了这句话没啥用*/
    writing-mode: vertical-rl;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-rl;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
    text-align: center;
    padding:0px;
    display:flex;
    -webkit-display:flex;
    flex-direction:column;
    height: 150px;
    color: #a8cfe6;
    justify-content:center;
}
</style>